<template>
    <div>
        <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人经历</a-breadcrumb-item>
          <a-breadcrumb-item>培训经历</a-breadcrumb-item>
        </a-breadcrumb>
     <div>
    <el-card style="margin-top:20px" shadow="hover">
      <el-container>
    <el-header>
      <div>
        <el-row>
          <!-- 添加 -->
          <el-col :span="1">
            <el-button type="primary" @click="adds()">添加</el-button>
        </el-col>
        <el-col :span="22">
          <div style="font-size:25px">培训经历管理</div>
        </el-col>
        </el-row>
      </div>
    </el-header>
  <el-main>

       <el-table
    :data="tableData"
    border
    style="font-size: 16px; width:90% left:10% ">

    <el-table-column type="index" width="60" label="序号">  
    </el-table-column> 
    <el-table-column
      prop="static"
      label="状态"
      width="60">
    </el-table-column>
    <el-table-column
      prop="train"
      label="培训类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="start"
      label="开始日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="end"
      label="结束日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="school"
      label="培训机构"
      width="100">
    </el-table-column>
    <el-table-column
      prop="content"
      label="培训内容"
      width="100">
    </el-table-column>
    <el-table-column
      prop="cadre"
      label="干部名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="certificate"
      label="获奖证书"
      width="90">
    </el-table-column>
    <el-table-column
      prop="person"
      label="证明人"
      width="90">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="联系电话"
      width="100">
    </el-table-column>
    <el-table-column
      prop="beizhu"
      label="备注">
    </el-table-column>
  </el-table>

    <!-- 添加经历的对话框 -->
    <el-dialog title="新增经历" :visible.sync="el_show" height="700px">
    <!-- 内容主体区 -->
    <el-form width="50px">
        <!-- <el-form-item label="技能名称" prop="skillname" >
        <el-input v-model="addForm.skillname"></el-input>
        </el-form-item> -->
        <el-form-item label="培训类型" prop="train" >
        <el-input v-model="train"></el-input>
        </el-form-item>
        <el-row :gutter="20">
        <el-col :span="12"><div > 
            <el-form-item label="开始日期" prop="start">
        <el-input v-model="start"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div >
            <el-form-item label="结束日期" prop="end">
        <el-input v-model="end"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12"><div > 
            <el-form-item label="学校名称" prop="school">
        <el-input v-model="school"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div >
            <el-form-item label="专业名称" prop="marjor">
        <el-input v-model="marjor"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12"><div > 
            <el-form-item label="干部名称" prop="cadre">
        <el-input v-model="cadre"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div >
            <el-form-item label="获奖证书" prop="certificate">
        <el-input v-model="certificate"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
         <el-row :gutter="20">
        <el-col :span="12"><div > 
            <el-form-item label="证明人" prop="person">
        <el-input v-model="person"></el-input>
           </el-form-item>
        </div></el-col>
        <el-col :span="12"><div >
            <el-form-item label="联系电话" prop="tel">
        <el-input v-model="tel"></el-input>
        </el-form-item>
        </div></el-col>
        </el-row>
       
        <el-form-item label="备注" prop="beizhu">
        <el-input v-model="beizhu " type="textarea" :row="6"></el-input>
        </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pushs()">新 增</el-button>
        <el-button  @click="err()">取 消</el-button>
    </span>
    </el-dialog>


  </el-main>
  </el-container>
    </el-card>
    </div>
    </div>
    
</template>
<script>
export default {
   name:'Evaluation',
    data() {
        return {
          tableData: [{
            id:1,
            static:'',
            train:'线上',
            start:'2010年',
            end:'2012年',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'xxxxxxxxx',
            beizhu:'暂无',
          }, {
            id:2,
            static:'',
            train:'线下',
            start:'2014年',
            end:'2015年',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'xxxxxxxxx',
            beizhu:'暂无',
          }, {
            id:3,
            static:'',
            train:'线上',
            start:'2016年',
            end:'2016年',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'xxxxxxxxx',
            beizhu:'暂无',
          }, {
           id:4,
            static:'',
            train:'线上',
            start:'2017年',
            end:'2018年',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'xxxxxxxxx',
            beizhu:'暂无',
          },
          {
           id:5,
            static:'',
            train:'线下',
            start:'2018年',
            end:'2020年',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'xxxxxxxxx',
            beizhu:'暂无',
          },
        ],
        el_show:false,
        
        el_xiu:false,
            train:'',
            start:'',
            end:'',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'',
            beizhu:'',
        newtable:{
            train:'',
            start:'',
            end:'',
            school:'',
            marjor:'',
            cadre:'',
            certificate:'',
            person:'',
            tel:'',
            beizhu:'',
        },   //修改内容暂存区
        formLabelWidth: '120px',
        newid:0   //存储点击的id
      }
    },
    methods:{
        //新增让弹框显示
        adds:function(){
            this.el_show=true;
            
        },
        //取消让弹框隐藏
        err:function(){
            this.el_show=false;
        },

        //新增
        pushs:function(){
            if(!this.train||!this.start||!this.end||!this.school
            ||!this.marjor||!this.cadre||!this.certificate
            ||!this.person||!this.tel||!this.beizhu){
                this.$message.error('内容不能为空');
                return;
            }
            //使用map方法获取到id的最大值
            let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
            this.tableData.push({
                    train:this.train,
                    start:this.start,
                    end:this.end,
                    school:this.school,
                    marjor:this.marjor,
                    cadre:this.cadre,
                    certificate:this.certificate,
                    person:this.person,
                    tel:this.tel,
                    beizhu:this.beizhu,
                    id:ids
            })
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
            this.$message({
                message: '创建成功',
                type: 'success'
            });
            this.train="",
            this.start="",
            this.end="",
            this.school="",
            this.marjor="",
            this.cadre="",
            this.certificate="",
            this.person="",
            this.tel="",
            this.beizhu="",
            
            this.el_show=false;
        },
    }
  }
</script>

<style lang="less" scoped>

     div {
        font-size: 15px;
        font-family:
       "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
     .el-header, .el-footer {
    background-color:#E9EEF3 ;
    color: #333;
    text-align: center;
    line-height: 50px;
    }
  .el-header {
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding-top: 8px;
    }
    .label{
      font-size: 15px;
    }  
    .el-dialog__header {
    padding: 0 auto;
    height: 30px;
} 
</style>